<template>
  <div class="search-main">
    <div class="container">
      <div class="search-content xs-width-96">
        <ul class="search-content-title">
          <li :class="{'li-active': selectActive === -1}" @click="itemClick($event, -1, '')">
            <div>站内</div>
            <div>
              <el-icon class="top-icon">
                <CaretTop/>
              </el-icon>
            </div>
          </li>
          <li v-for="(item,index) in searchList"
              :class="{'li-active': selectActive === index}"
              @click="itemClick($event, index, item.searchUrl)"
              :key="index"
              v-if="item?.searchStatus !== '2'"
          >
            <div>{{ item.searchName }}</div>
            <div>
              <el-icon class="top-icon">
                <CaretTop/>
              </el-icon>
            </div>
          </li>
        </ul>
        <div class="xs-width-100">
          <el-autocomplete
              class="search-input"
              placeholder="请输入关键词"
              v-model="searchValue"
              :trigger-on-focus="false"
              size="large"
              @keydown.enter="searchClick"
              :fetch-suggestions="querySearchTips"
          >
          </el-autocomplete>
          <el-button class="search-button" type="primary" :icon="Search" size="large" @click="searchClick">搜 索
          </el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import {Response} from "@/entity/response";
import {CaretTop, Search} from "@element-plus/icons-vue";
import {Search as SearchEntity} from "@/entity/search";

const props = defineProps({
  value: {
    type: String,
    default: ''
  },
})
const {ModalUtils} = useUtils();
const searchList = ref<SearchEntity[]>([]);
const searchUrl = ref("");
const searchValue = ref("");
const selectActive = ref(-1);
const {searchApi} = useApi();
const router = useRouter();
const emits = defineEmits(['searchChange']);
const COOKIE_SEARCH_URL = "searchUrl";
const COOKIE_SEARCH_URL_INDEX = "searchUrlIndex";
const cookie_searchUrl = useCookie(COOKIE_SEARCH_URL, {
  path: "/",
  maxAge: 60 * 60 * 24 * 30
});
const cookie_searchUrlIndex = useCookie(COOKIE_SEARCH_URL_INDEX, {
  path: "/",
  maxAge: 60 * 60 * 24 * 30
});
onBeforeMount(() => {
  getSearch();
  searchValue.value = props.value;
});
const getSearch = () => {
  searchApi.getList().then((res: any) => {
    let {code, data}: Response = res
    if (code === 200) {
      searchList.value = data;
    }
    searchUrl.value = useCookie(COOKIE_SEARCH_URL).value || "";
    if (!isNaN(Number(useCookie(COOKIE_SEARCH_URL_INDEX).value))) {
      selectActive.value = Number(useCookie(COOKIE_SEARCH_URL_INDEX).value);
    } else {
      selectActive.value = -1;
    }
  })
};
const itemClick = (e: Event, index: number, url: string) => {
  selectActive.value = index;
  if (url == "" || url == null) {
    searchUrl.value = "";
  } else {
    searchUrl.value = "//" + url;
  }
  //增加选择记忆
  cookie_searchUrl.value = searchUrl.value;
  cookie_searchUrlIndex.value = String(index);
  ModalUtils.msgSuccess("搜索引擎切换成功");
};
const searchClick = () => {
  if (searchValue.value && searchValue.value !== "") {
    if (searchUrl && searchUrl.value != "") {
      //站外搜索
      window.open(searchUrl.value + "" + searchValue.value);
    } else {
      emits("searchChange", searchValue.value);
      //站内搜索
      router.push('/search/' + searchValue.value);
    }
  } else {
    ModalUtils.msgWarning("请填写您要搜索的内容");
  }
};
const querySearchTips = (queryString: string, cb: (arg: any) => void) => {
  let suggestList: { value: string }[] = [];
  searchApi.getTips(queryString).then((res: any) => {
    let {code, data}: Response = res
    if (code === 200) {
      if (data) {
        for (let dataKey in data) {
          let obj = {
            value: data[dataKey],
          };
          suggestList.push(obj);
        }
      }
      cb(suggestList);
    }
  });
};
</script>

<style scoped lang="scss">
.search-main {
  width: 100%;
  background: radial-gradient(circle, rgba(238, 174, 202, 1) 0%, rgba(148, 187, 233, 1) 100%);

  .search-content {
    overflow: hidden;
    width: 500px;
    margin: 0 auto;
    padding: 150px 0;
  }

  .search-content-title {
    overflow: hidden;
    padding: 0 20px;

    .top-icon {
      font-size: 22px;
    }

    li {
      font-size: 14px;
      text-align: center;
      float: left;
      cursor: pointer;
      margin-right: 10px;

      &:hover {
        color: var(--el-color-primary);
      }
    }

    .li-active {
      color: var(--el-color-primary);
    }
  }

  .search-button {
    border-radius: 0 30px 30px 0;
    padding: 12px 30px;
  }
}

::v-deep(.el-input__wrapper) {
  border-radius: 30px 0 0 30px;
  width: 300px;
  box-shadow: 0 0 0 1px #FFFFFF inset;
}

::v-deep(.el-input__wrapper.is-focus) {
  box-shadow: 0 0 0 1.5px var(--el-input-focus-border-color) inset;
}
</style>
